<template>
  <div class="hz-select">
    <el-select
      style="width:100%"
      :multiple="isMultiple"
      :collapse-tags="isCollapseTags"
      :filterable="isFilterable"
      @change="handleSelectChange"
      :clearable="clearable"
      :disabled="disabled"
      size="small"
      v-model="ownValue"
      :placeholder="placeholder"
    >
      <el-option
        v-for="item of options"
        :key="item[optionValue]"
        :label="item[optionName]"
        :value="item[optionValue]"
        @click.native="optionsClick(item)"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'HzSelect',
  props: {
    placeholder: String,
    clearable: Boolean,
    isFilterable: Boolean,
    isMultiple: Boolean,
    isCollapseTags: Boolean,
    disabled: Boolean,
    notAll: Boolean,
    value: [String, Number,Array],
    optionName: {
      type: String,
      default: 'label'
    },

    optionValue: { type: String, default: 'value' },
    options: {
      type: Array
    }
  },
  data () {
    return {
      ownValue: this.value
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      if (this.notAll) {
        this.ownOptions = this.options
      }
    },
    handleSelectChange (val) {
      this.$emit('selectChange', val)
    },
    optionsClick (item) {
      this.$emit('optionClick', item)
    }
  },
  watch: {
    ownValue () {
      this.$emit('update:value', this.ownValue)
    },
    value () {
      this.ownValue = this.value
    }
  }
}
</script>

<style lang="scss" scoped>
  .hz-select {
    white-space: nowrap;
    .label {
      white-space: nowrap;
      margin-right: 10px;
      font-size: 14px;
    }
  }
</style>
